<template>
  <div>
    <x-header :left-options="{showBack: false}" :right-options="{showMore: true}" @on-click-more="showMenus = true">投票</x-header>
    <div class="ui-body">
      <group gutter="0" v-for="(item, index) in data">
        <cell :title="item.VoteName" value="" is-link  @click.native="showSelect(item.ID)"></cell>
      </group>
      <group gutter=0 v-if="data.length > 12">
        <load-more :show-loading="!noMore" :tip="noMore ? '我是有低线的' : '正在加载'"></load-more>
      </group>
      
      <actionsheet v-model="show" :menus="menus" :close-on-clicking-mask="false" show-cancel @on-click-menu-result="operation('result')" @on-click-menu-show="operation('show')" @on-click-menu-edit="operation('edit')" @on-click-menu-message="operation('message')"></actionsheet>
      <actionsheet v-model="showMenus" :menus="menus2" :close-on-clicking-mask="false" show-cancel   @on-click-menu-create="operation('create')" ></actionsheet>
    </div>
  </div>
</template>

<script>
import { Group, Cell, Actionsheet, XHeader, LoadMore } from 'vux'
import axios from 'axios'
require('es6-promise').polyfill()

export default {
  name: 'index',
  components: {
    Group,
    Cell,
    Actionsheet,
    XHeader,
    LoadMore
  },
  data () {
    return {
      videoUrl: '',
      show: false,
      showMenus: false,
      noMore: false,
      id: '',
      PageIndex: 1,
      PageSize: 20,
      Creater: '40ef1ec2-8309-4592-ab39-0fe68298412c',
      data: [],
      menus: {
        edit: '编辑',
        show: '预览',
        message: '发消息'
      },
      menus2: {
        create: '新建'
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.roll)
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getInitData()
    })
  },
  methods: {
    getInitData () {
      axios.get(this.$store.state.url + '/VoteManage/GetVoteList.ashx', {params: {PageIndex: this.PageIndex, PageSize: this.PageSize, Creater: document.getElementById('Creater').value}})
      .then((rs) => {
        let data = rs.data
        if (data.result) {
          if (data.message.length < this.PageSize) {
            this.noMore = true
          }
          this.data = [...this.data, ...data.message]
        } else {
          this.$vux.toast.text(data.tip, 'bottom')
        }
      })
      .catch((response) => {
        this.$vux.toast.text('请求失败请稍后再试', 'bottom')
      })
    },
    roll () {
      this.scroll = document.body.scrollTop
      if (!this.noMore && (document.body.offsetHeight - document.documentElement.clientHeight - this.scroll === 0)) {
        this.PageIndex = this.PageIndex + 1
        this.getInitData()
      }
    },
    showSelect (id) {
      this.id = id
      this.show = !this.show
    },
    operation (key) {
      if (key === 'show') {
        this.$router.push({name: 'Show', params: {id: this.id}})
      } else if (key === 'edit') {
        this.$router.push({name: 'Edit', params: {create: false, id: this.id}})
      } else if (key === 'create') {
        this.$store.commit('reset')
        this.$router.push({name: 'Edit', params: {create: true, id: this.id}})
      } else if (key === 'result') {
        this.$router.push({name: 'ShowResult', params: {id: this.id}})
      } else if (key === 'message') {
        this.$store.commit('reset_message')
        this.$router.push({name: 'Message', params: {id: this.id}})
      }
    }
  }
}
</script>

<style>
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
</style>
